<template>
    <div>
        <div id="Two">
            <div id="class" @touchstart="classes"></div> 
            <div v-for="n in cat" id="box">
                 <router-link :to="'/user/goodslist/'+n.title">
                <div>
            <img :src="n.img">
            <p>{{n.title}}</p>
            </div>
            </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex';
export default {
    computed:{
        ...mapState([
            "cat"
        ])
    },
    mounted:function(){
        this.$store.dispatch("requestcat");
    },
     methods:{
        classes:function(){
            location.hash="/user/shoppingclass"
        }
    }
}
</script>

<style scoped>
#Two{
    width: 100%;
    height: 30vh;
    border:solid 1px #dbdbdb;
    border-top:none;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
#box{
    cursor: pointer;
    margin-top: 2vh;
   width: 25%;
   height: 11vh;
   text-align: center;
    font-size: 14px;

}
img{
    width: 10vw;

}
p{
    margin: 0;
}
#class{
    position: absolute;
    width: 15vw;
    height: 10vh;
    /* border:solid 1px black; */
    bottom: 3vh;
    right: 5vw;

}
a{
    text-decoration: none;
    color: black;
}
</style>